/**
 * 定义组件：
 *    1. 类组件
 *    2. 函数组件
 *
 *    PS:
 *      1. 组件名必须是大驼峰语法【首字母必须大写】
 *
 * 使用组件：
 *      1. 将组件名当成自定义标签使用即可。
 */

import React from "react";
/**
 * 类组件
 *
 *    PS:
 *        1. 必须要继承 React.Compoent | React.PureComponent 基类
 *        2. 必须要实现一个 render 函数
 *        3. render 函数必须要有返回值，返回值就是一个 ReactNode
 *
 *          ReactNode   ReactElement
 *
 *          ReactNode 大于 ReactElement， 支持 null 与 undefined 与 string ...
 */
class Hello extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello 组件</h1>
      </div>
    );
  }
}

/**
 * 函数组件
 *    PS:
 *        1. 必须要有返回值，返回值是一个 ReactNode 就是组件的渲染内容
 */
function World() {
  return (
    <div>
      <button>World</button>
    </div>
  );
}

function App() {
  return (
    <>
      <Hello />
      <div>
        <World />
      </div>
    </>
  );
}

export default App;

// export default World;

// export { Hello, World };

// export default {
//   Hello,
//   World,
// };
